<template>
  <div class="city">
    <van-search v-model="searchValue" placeholder="城市/区域/位置" @search="onSearch" @cancel="onCancel" sticky show-action
      shape="round" />
    <van-tabs v-model:active="active" swipeable color="#ff9843" lazy-render>
      <template v-for="(value, key) in cities" :key="key">
        <van-tab :title="value.title">
          <div class="contents">
            <cityGroup :group-data="value"></cityGroup>
          </div>
        </van-tab>
      </template>
    </van-tabs>
  </div>
</template>
<script setup>
import useCityStore from '@/stores/modules/city';
import cityGroup from './cpns/city-group.vue';
import { storeToRefs } from 'pinia';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

const cityStore = useCityStore()
cityStore.fetchCitiesData(); // 请求数据
const { cities } = storeToRefs(cityStore)
const searchValue = ref("")
const active = ref(0)
// const indexList = computed(()=>{
//   return
// })
const onSearch = (e) => {
  console.log(e);
}
const onCancel = () => {
  router.back();
}
</script>
<style lang="less" scoped>
.city {
  --van-field-icon-size: 16px;
  // --van-search-left-icon-color: var( --primary-color ); // 全局修改
}

.contents {
  height: calc(100vh - 54px - 44px);
  overflow-y: auto;
}
</style>
